<template>
  <div class="content-wraper">
    <!-- 头部 -->
    <header-component :title="headertitle"></header-component>
    <!-- 下拉列表 -->
    <div class="select">
      <div class="select-title">
        <button :class="{active:headeractive.grade}" @click="selectData('a')">{{titleGrade}}</button>
        <div class="middle"></div>
        <button :class="{active:headeractive.course}" @click="selectData('b')">{{titleCourse}}</button>
      </div>
      <div class="select-content" v-if="show">
        <button v-for="(item,index) of buttonList" :key="item.id"
                :class="{add:chose==index}"
                @click="handleButtonClick(index)">
          {{el=='a'?item.grade:item.course}}
        </button>
      </div>
    </div>
    <!-- 轮播图 -->
    <swiper :options="swiperOption">
      <swiper-slide v-for="item of videoList" :key="item.id"><img class="video-img" :src='item.imgurl'></swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <!-- 录像列表 -->
    <div class="video-list" v-for="item of listItem" :key="item.id">
      <div class="list-title" @click="divHandleClick(item)">
        <img class="list-img" :src='item.url'>
        <div class="left">
          <p class="name">{{item.name}}</p>
          <p class="tipcontent">{{item.content}}</p>
        </div>
      </div >
      <div class="list-video">
        <video :src="item.src" controls="controls"></video>
      </div>
      <div class=" list-click">
        <div><span class="iconfont">&#xe618;</span>25</div>
        <div class="dian"><span class="iconfont">&#xe653;</span>15</div>
        <div>{{item.time}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import HeaderComponent from '../../commom/HeaderComponent'

  export default {
    name: "Video",
    components: {HeaderComponent},
    data() {
      return {
        titleGrade: '年级',
        titleCourse: '科目',
        headeractive: {
          grade: false,
          course: false
        },
        headertitle: "教学楼",
        buttonList: [
          {
            id: '001',
            grade: '全部',
            course: '语文'
          },
          {
            id: '002',
            grade: '高一',
            course: '数学'
          },
          {
            id: '003',
            grade: '高二',
            course: '英语'
          },
          {
            id: '004',
            grade: '高三',
            course: '物理'
          }, {
            id: '005',
            grade: '初一',
            course: '化学'
          },
          {
            id: '006',
            grade: '初二',
            course: '生物'
          },
          {
            id: '007',
            grade: '初三',
            course: '全部'
          }
        ],
        show: false,
        el: "",
        chose: "11",
        swiperOption: {
          pagination: '.swiper-pagination',
          loop: true,
          autoplay: 3000
        },
        videoList: [
          {
            id: '001',
            imgurl: "http://img1.qunarzz.com/piao/fusion/1811/11/5fd3b05ad948bf02.jpg_750x200_56a60662.jpg"
          },
          {
            id: '002',
            imgurl: "http://img1.qunarzz.com/piao/fusion/1811/7c/8e5c4ab8ee8b7402.jpg_750x200_dd7a38dd.jpg"
          },
          {
            id: '003',
            imgurl: "http://img1.qunarzz.com/piao/fusion/1609/47/0cfdc871ac183702.jpg_750x200_f6896acd.jpg"
          }
        ],
        listItem:[
          {
            id:'000001',
            url:"http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",
            name:'可歌可泣的十二生肖传说',
            content:'首先需要感谢你在逛街打游戏睡觉唱K聊八卦谈恋爱之余还有可以打开学渣乐园观看语文视频，那我一定.',
            src:"../../../static/aaaaaaaaa.mp4",
            time:'2017-3-15'
          },
          {
            id:'000002',
            url:"http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png",
            name:'可歌可泣的十二生肖传说',
            content:'首先需要感谢你在逛街打游戏睡觉唱K聊八卦谈恋爱之余还有可以打开学渣乐园观看语文视频，那我一定.',
            src:"../../../static/aaaaaaaaa.mp4",
            time:'2018-3-15'
          },
          {
            id:'000003',
            url:"http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
            name:'可歌可泣的十二生肖传说',
            content:'首先需要感谢你在逛街打游戏睡觉唱K聊八卦谈恋爱之余还有可以打开学渣乐园观看语文视频，那我一定.',
            src:"../../../static/aaaaaaaaa.mp4",
            time:'2019-3-15'
          }
        ]
      }
    },
    methods: {
      selectData: function (el) {
        this.el = el;
        if (el == 'a') {
          this.headeractive.grade = true;
          this.headeractive.course = false;
        } else {
          this.headeractive.grade = false;
          this.headeractive.course = true;
        }
        this.show = true
      },
      handleButtonClick: function (index) {
        this.chose = index;
        this.titleGrade = this.buttonList[index].grade;
        this.titleCourse = this.buttonList[index].course;
        this.show = false
      },
      divHandleClick:function (a){
        console.log(a)
        this.$router.push({path:'Videodetail',query:{userId: JSON.stringify(a)}})

      }
    }
  }
</script>

<style scoped>
  .content-wraper{
    background: #fff3c1;
  }
  .select {
    margin-top: 1rem;
    background: #ffe57e;
  }

  .select-title {
    display: flex;
    justify-content: space-between;
  }

  .select-title button {
    width: 30%;
    padding: 0 0 .1rem 0;
    margin: .1rem .8rem 0 .8rem;
    font-size: 24px;
    font-weight: bold;
    color: #e3a51c;
    background: #ffe57e;
  }

  .active {
    border-bottom: 3px solid #e3a51c;
  }

  .middle {
    width: .06rem;
    margin: .2rem 0;
    background: #5f2500;
  }

  .select-content {
    display: flex;
    flex-wrap: wrap;
    background: #fcd32d;
    padding: .4rem .2rem;
  }

  .select-content button {
    width: 30%;
    padding: .2rem 0;
    margin: .2rem 0 .2rem .2rem;
    font-size: 24px;
    font-weight: bold;
    color: #703d0e;
    background: #ffe57e;
  }

  /*.select-content button:focus{*/
  /*color: #ffffff;*/
  /*background: #dd9f1a;*/
  /*}*/
  .add {
    color: #ffffff !important;
    background: #dd9f1a !important;
  }

  .video-img {
    width: 100%;
  }

  .video-list {
    padding: .3rem .4rem .4rem .3rem;
    margin-bottom: .4rem;
    background: white;
  }

  .list-title {
    display: flex;
    width: 90%;
    margin: 0 auto;
  }

  .list-img {
    width: 20%;
    height: 20%;
  }
  .left{
    margin-left: .6rem;
  }
.name{
  margin-top: .2rem;
  font-size: 18px;
  font-weight: bold;
}
  .tipcontent{
    line-height: .4rem;
    margin-top: .4rem;
    font-size: 15px;
    color: #bababa;
  }
  .list-video{
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
.list-video video{
  width: 100%;
}
  .list-click{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    margin: .3rem auto 0 auto;
    font-size: 16px;
    color: #bababa;
  }
  .iconfont{
    margin-right: .2rem;
  }
  .dian{
    margin-right: 5rem;
  }
</style>
